<template>
  <div :class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']">
    <sidebar-logo v-if="showLogo" :collapse="isCollapse"></sidebar-logo>
    <el-scrollbar wrap-class="scrollbar-wrapper" :class="[appStore.device === 'mobile' ? 'mobile' : 'pc']">
      <el-menu
        router
        unique-opened
        mode="vertical"
        popper-class="custom-menu"
        :collapse="isCollapse"
        :collapse-transition="false"
        :popper-effect="'light'"
        :default-active="defaultActive">
        <sidebar-item
          v-for="routes in manageData"
          :key="routes.path"
          :item="routes"
          :base-path="routes.path"></sidebar-item>
      </el-menu>
    </el-scrollbar>
    <sidebar-collapse :is-active="isCollapse" @toggleClick="toggleSideBar"></sidebar-collapse>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from "vue";
import SidebarLogo from "@/layouts/manage/components/LaySidebar/components/SidebarLogo.vue";
import SidebarItem from "@/layouts/manage/components/LaySidebar/components/SidebarItem.vue";
import SidebarCollapse from "@/layouts/manage/components/LaySidebar/components/SidebarCollapse.vue";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { useAppStoreHook } from "@/store/modules/app";
import { useRoute, type RouteRecordRaw } from "vue-router";
const showLogo = ref(true);
const appStore = useAppStoreHook();
const isCollapse = computed(() => !appStore.sidebar.opened);
const route = useRoute();
const defaultActive = computed(() => {
  const {
    meta: { activeMenu },
    path
  } = route;
  return activeMenu ? activeMenu : path;
});
const permissionStore = usePermissionStoreHook();
const manageData = computed(() => permissionStore.manageMenus as RouteRecordRaw[]);

const toggleSideBar = () => {
  appStore.toggleCollapse();
};
</script>
<style scoped lang="scss"></style>
